<template>
  <div id="reports">

  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from 'vue'
import * as echarts from 'echarts';
export default {
  setup(props) {
    const option = reactive({
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [800, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: '灰太狼' },
        { value: 38, name: '喜羊羊' },
        { value: 32, name: '懒洋洋' },
        { value: 30, name: '红太狼' },
        { value: 28, name: '慢羊羊' },
        { value: 26, name: '沸羊羊' },
        { value: 22, name: '美羊羊' },
        { value: 18, name: '花羊羊' }
      ]
    }
  ]
})
    onMounted(() => {
      const chartDom = document.getElementById('reports');
      const myChart = echarts.init(chartDom);
      option && myChart.setOption(option);
    })
    return {}
  },
}
</script>
<style lang="scss" scoped>
#reports {
  width: 100%;
  height: 100%;
}
</style>
